<template>
  <up-modal :show="show" class="bg-green-yellow" :show-confirm-button="false" :show-cancel-button="false">
    <view class="slot-content">
      <view class="bg-modal">
        <view class="text-center">
          <view class="relative" style="z-index: 999;">
            <u-image class="modal-img" style="" src="/static/images/sad.png" height="160" width="160" mode="aspectFill" />
          </view>
          <view class="mt-4 pt-16 text-xl text-#1A2B5C font-bold">
            温馨提示
          </view>
          <view class="mt-6 px-4">
            您的宿舍是 <text class="text-#3AA69B font-bold">
              女生公寓4-10
            </text>，
          </view>
          <view class="mb-6 mt-1">
            请前往本宿舍楼报到！
          </view>
        </view>

        <view class="mx-2 pb-2">
          <u-button size="default" shape="circle" class="gradient-button" @click="show = false">
            <text class="text-base text-white">
              我已知晓
            </text>
          </u-button>
        </view>
      </view>
    </view>
  </up-modal>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';

const show = ref(false);
const init = () => {
  show.value = true;
};
defineExpose({
  init,
});
</script>

<style lang="scss" scoped>
  :deep(.u-modal__content){
    background: transparent;
  }
  :deep(.u-popup__content){
    background: transparent;
  }
  .bg-modal{
    background: linear-gradient(to bottom, #B5FFEB, #F5FAE7, #FFFFFF);
    padding: 0px 20px 20px 20px;
    border-radius: 16px;
  }
  .modal-img{
    position: absolute; top: 14px; left: 0; right: 0; bottom: 0; margin: auto;
    z-index: 999;
  }
  :deep(.u-line){
    display: none;
  }
</style>
